<template>
    <div class="box">
        <div class="header">
            <h1>商品分类</h1>
        <el-button @click="addVisible = true" type="primary" class="btns">
            添加分类
        </el-button>
        </div>
        <el-tree :data="list" :props="defaultProps" @node-click="handleNodeClick">
            <template #default="{ node }">
                <span class="custom-tree-node">
                    <span>{{ node.label }}</span>
                    <span class="custom-tree-node-right">
                        <span>
                            <span class="del" @click="edit(node.data)">
                                <el-icon :size="size" color="#409eff">
                                    <Edit />
                                </el-icon>
                                <a style="color: #409eff;">编辑</a>
                            </span>
                        </span>
                        <span>
                            <span class="del" @click="del(node.data)">
                                <el-icon :size="size" color="#f56c6c">
                                    <Delete />
                                </el-icon>
                                <a>删除</a>
                            </span>
                        </span>
                    </span>
                </span>
            </template>
        </el-tree>
        <!-- 点击编辑弹出编辑的对话框 -->
        <el-dialog v-model="dialogVisible" title="编辑分类" width="30%" >
            <el-input v-model="editValue"/>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="editOK">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 点击编辑弹出添加分类的对话框 -->
        <el-dialog v-model="addVisible" title="添加分类" width="30%" >
            <span>分类名称</span>
            <el-input v-model="addValue"/>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addVisible = false">取消</el-button>
                    <el-button type="primary" @click="addOK">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { proCategories, delCategories, editCategories, addCategories } from '@/api/goods.js'
import { defineComponent } from 'vue';
import { Delete, Edit } from "@element-plus/icons-vue";
import { mapState, mapMutations} from "vuex";
export default defineComponent({
    components: {
        Delete,
        Edit
    },
    data() {
        return {
            list: [],
            id: 0,
            //控制编辑分类对话框显示隐藏
            dialogVisible:false,
            //绑定编辑后的分类名
            editValue:'',
            //控制添加分类对话框显示隐藏
            addVisible:false,
            addValue:''
        }
    },
    mounted() {
        this.getProCategories()
    },
    computed:{
        ...mapState(["cat_id"]),
    },
    methods: {
        ...mapMutations(["setId"]),
        //获取商品分类列表
        getProCategories() {
            proCategories().then(res => {

                this.list = res.data.data
                this.list = JSON.parse(JSON.stringify(this.list).replace(/cat_name/g, 'label'));
                console.log(this.list)
            })
        },
        //添加分类
        addOK(){
            addCategories({cat_pid:0,cat_name:this.addValue,cat_level:0}).then(res=>{
                if(res.data.meta.status === 201){
                    this.addVisible = false
                    this.getProCategories()
                }
            })
        },
        //删除
        del(data) {
            delCategories({
                id: data.cat_id
            }).then(res => {
                if(res.data.meta.status === 200){
                    this.getProCategories()
                }
                
            })
        },
        //编辑
        edit(data) {
            this.setId(data.cat_id)
            this.dialogVisible = true
            this.editValue = data.label
            // console.log(this.cat_id,this.editValue)
        },
        //编辑完成
        editOK(){
            editCategories({
                id: this.cat_id,
                cat_name: this.editValue
            }).then(res => {
                if(res.data.meta.status === 200){
                    this.dialogVisible = false
                    this.getProCategories()
                }
            })
        }
    }
})
</script>


<style lang="scss" scoped>
.header{
    display: flex;
    align-items: center; 
    justify-content: space-between
}
.el-tree {
    font-size: 18px;

    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 18px;
        padding-right: 8px;

        .custom-tree-node-right {
            display: flex;
            flex: 1;
            justify-content: flex-end;

            .del {
                display: flex;
                margin-right: 20px;

                a {
                    font-size: 14px;
                    color: #f56c6c;
                }
            }
        }

    }
}
</style>